<template>
  <div>
    <!-- :visible.sync="dialogFormVisible" -->
    <el-dialog
      @close="closeFn"
      title="新增工单"
      :visible="dialogVisible"
      width="630px"
      top="120px"
         @open="openFn"
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="140px" style="width: 396px">
        <el-form-item label="设备编号" prop="innerCode">
          <el-input
            v-model="form.innerCode"
            placeholder="请输入"
            autocomplete="off"
            style="width: 396px"
             maxlength="15"
            show-word-limit
            @change="changeFn"
          ></el-input>
        </el-form-item>
           <el-form-item label="工单类型" prop="productType">
          <el-select
            v-model="form.productTypeId"
            placeholder="请选择"
            style="width: 396px"
             @change="changFN"
          >
            <el-option
            v-for="item in form.productType"
            :key="item.typeId"
            :label="item.typeName" :value="item.typeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="运维人员" prop="region">
          <el-select
            v-model="form.region"
            placeholder="请选择"
            style="width: 396px"
          >
            <el-option
            v-for="item in obj"
            :key="item.userId"
            :label="item.userName" :value="item.userId"></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="desc">
          <el-input
            :rows="3"
            maxlength="40"
            show-word-limit
            type="textarea"
            v-model="form.desc"
            style="width: 396px"
            placeholder="请输入备注（不超过40字）"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-row type="flex" justify="end">
            <el-button @click="cancelFn" class="cancal">取 消</el-button>
            <el-button type="primary" class="comfig" @click="comfigFn">确 定</el-button>
          </el-row>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { maintenanceList, taskType, createDetail } from '@/api/workorder'
export default {
  props: {
    dialogVisible: Boolean,
    innerCode: {
      type: [Number, String]
    },
    DetailList: {
      type: [Array, Object],
      default: () => {}
    }
  },
  data () {
    return {
      form: {
        innerCode: '',
        productType: {},
        desc: '',
        staff: '',
        region: '',
        productTypeId: ''
      },
      rules: {
        innerCode: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        productType: [
          { required: true, message: '请输入', trigger: 'change' }
        ],
        desc: [
          { required: true, message: '请输入', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入', trigger: 'change' }
        ]
      },
      dialogFormVisible: false,
      formLabelWidth: '400px',
      obj: []
    }
  },
  methods: {
    closeFn () {
      this.$refs.form.resetFields()
      this.form.productTypeId = null
      this.$emit('update:dialogVisible', false)
    },
    cancelFn () {
      // console.log('取消')
      this.closeFn()
    },
    editForm () {
      console.log(this.innerCode)
    },
    async getInnercode () {
      const res = await maintenanceList(this.DetailList.innerCode)
      console.log(res)
    },

    async getList () {
      const res = await taskType()
      console.log(res)
      this.form.productType = res
    },
    openFn () {
      this.getList()
      this.getInnercode()
    },
    async comfigFn () {
      console.log(this.form)
      try {
        await this.$refs.form.validate()
        const res = await createDetail({
          createType: 1,
          innerCode: this.form.innerCode,
          userId: 1,
          productType: this.form.productTypeId,
          desc: this.form.desc,
          details: [],
          assignorId: this.form.region
        })
        console.log(res)

        this.$message.success('新建工单成功')
        this.closeFn()
      } catch (error) {
        console.log(error)
        this.$message.error(error.response.data)
      }
    },
    changFN (num) {
      console.log(num)
    },
    async changeFn (val) {
      console.log(val)
      const res = await maintenanceList(val)
      // console.log(res)
      this.obj = res
    }

  }
}

</script>

<style lang="less" scoped>
/deep/ .el-dialog {
  border-radius: 15px;
  height: 420px;
  // padding: 0;
}
/deep/.el-form-item__label {
  text-align: right;
  height: 36px;
  line-height: 36px;
  box-sizing: border-box;
}
/deep/ .el-input__inner {
  height: 36px;
  line-height: 36px;
}
/deep/ .cancal {
  width: 80px;
  background-color: #fbf4f1 !important;
  border: none;
}
/deep/ .comfig {
  margin-left: 34px !important;
  width: 80px;
  border: none;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
}
/deep/ .el-dialog__header {
  // box-sizing: border-box;
  padding: 20px 20px 10px;
  height: 20px;
  text-align: left !important;
  font-size: 16px;
  font-weight: 500;
}
/deep/ .el-dialog__body {
  padding: 20px !important;
}
</style>
